<template>
  <div>
    {{values}}
    <p v-for="i in paramslist" :key="i">
      <van-field v-if="i.type == 'input'" :label="i.lable" v-model="values[i.label]" class="tname"/>
      <select name="" id="" v-if="i.type == 'select'" v-model="values[i.label]">
        <option :value="j.type" v-for="j in i.values" :key="j">{{j.name}}</option>
      </select>
      <van-uploader v-if="i.type == 'file'" />
      <el-date-picker
        v-if="i.type == 'datetime'"
        v-model="value1"
        type="datetimerange"
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      ></el-date-picker>
    </p>
    <van-button @click="getaudit">选择审批人</van-button>
    <el-dialog v-model="dialogTableVisible" title="Shipping address">
      <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          @check="getids"
      />
    </el-dialog>
    <van-button @click="submit">提交</van-button>
  </div>
</template>

<script>
import myaxios from 'axios'
export default {
name: "qingjia",
  data(){
   return{
     wid:this.$route.query.id,
     workf:{},
     paramslist:{},
     value1:[],
     values:{},
     pic:'1.jpg',
     checkdvalues:[],
     dialogTableVisible:false,
     data: [
       {
         id: 1,
         label: 'Level one 1',
         children: [
           {
             id: 4,
             label: 'Level two 1-1',
             children: [
               {
                 id: 9,
                 label: 'Level three 1-1-1',
               },
               {
                 id: 10,
                 label: 'Level three 1-1-2',
               },
             ],
           },
         ],
       },
       {
         id: 2,
         label: 'Level one 2',
         children: [
           {
             id: 5,
             label: 'Level two 2-1',
           },
           {
             id: 6,
             label: 'Level two 2-2',
           },
         ],
       },
       {
         id: 3,
         label: 'Level one 3',
         children: [
           {
             id: 7,
             label: 'Level two 3-1',
           },
           {
             id: 8,
             label: 'Level two 3-2',
           },
         ],
       },
     ],
     defaultProps:{
       children:'children',
       label:'name'
     }
   }
  },
  methods:{
    getwork(){
      myaxios({url:'http://127.0.0.1:5000/getworkf', method:'post', data:{'id':this.wid}})
      .then(res=>{
        console.log(res.data)
        this.workf = res.data.workf
        this.paramslist = JSON.parse(res.data.workf.params)
      })
    },
    getlabelByType(type){
      let label = ''
      for (var i=0; i<this.paramslist.length; i++){
        if(this.paramslist[i]['type'] == type){
          label = this.paramslist[i]['lable']
        }
      }
      return label
    },
    getaudit(){
      //读取公司部门角色列表
      myaxios({url:'http://127.0.0.1:5000/getcomanyuser', method:'get'})
      .then(res=>{
        this.data = res.data.list
      })
      this.dialogTableVisible = true
    },
    getids(val1, status){
      this.checkdvalues = []
      let list = status['checkedNodes']
      for (var i=0; i<list.length; i++){
        if (list[i]['type'] == 3){
          this.checkdvalues.push(list[i]['id'])
          alert(this.checkdvalues)
        }
      }
    },
    submit(){
      if (this.pic){
        let label = this.getlabelByType('file')
        this.values[label] = this.pic
      }
      if (this.value1.length>0){
        let stime = this.getlabelByType('datetime')
        this.values[stime] = this.value1[0]
        this.values['结束时间'] = this.value1[1]
      }
      let name = document.getElementsByTagName('input')[0].value
      let title = name+this.workf['name']
      myaxios({url:'http://127.0.0.1:5000/taskm',method:'post',data:{'title':title,'params':JSON.stringify(this.values), 'auditids':this.checkdvalues}})
      .then(res=>{
        console.log(res.data)
      })
    }
  },
  mounted() {
    this.getwork()
  }
}
</script>

<style scoped>

</style>